<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/animate.css">
    <script src="../js/vue.js"></script>
    <script src="../js/vue-router.js"></script>
    <title>Document</title>
    <style>
         .box{
            width:50%;
            min-height:300px;
            border:1px solid #999;
            border-radius: 10px;
            background: darkcyan;
            padding: 30px;

        }
        .router-link-exact-active, .router-link-active{
            font-size: 30px;
            font-weight: bold;
            color:#f50;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2>{{title}} </h2>

        <!-- 5.路由出口 路由匹配到的组件将渲染在这里 -->
       <router-view class="box"></router-view>
        <hr>
        <!-- 6.路由跳转 声明式 -->
       <router-link to="/home">首页1</router-link>
       <router-link to="/dashboard">首页2</router-link>
       <router-link :to="{name:'home'}">首页3</router-link>

       <router-link to="/news/0221/infos/奥运会">新闻-奥运会</router-link>
       <router-link :to="{name:'news',params:{nid:2022,title:'新春快乐'}}">新闻-虎年初一</router-link>

       <router-link to="/user?uid=2114&name=TongTong">用户 - 瞳瞳</router-link>
       <router-link :to="{name:'user',query:{uid:2113,name:'RuiRui'}}">用户 - 瑞瑞</router-link>

       <router-link to="/find/东湖/0520?who=瞳瞳#level13">find-1</router-link>
       <router-link :to="{name:'find',params:{address:'上海',time:'0601'},query:{who:'大家一起'}}">find - 2</router-link>

       <router-link to="/mine/1314">个人中心</router-link>
       <router-link :to="{name:'mine',params:{mid:520}}">个人中心2</router-link>
       <router-link to="/mine/admin">超管</router-link>

    </div>

    <template id="home">
        <div>
            <h2>Home - HOMe - HOme</h2>
        </div>
    </template>
    <template id="news">
        <div>
            <h2>News - NEws - newS </h2>
            <h2>:路由参数( params)</h2>
            <h2>nid --- {{$route.params.nid}}</h2>
            <h2>title --- {{$route.params.title}}</h2>
        </div>
    </template>
    <template id="find">
        <div>
            <h2>Find - FINd - FInd</h2>
            <h2>$route (路由信息)</h2>
            <div>
                <p>$route.params(路由参数)</p>
                <h3>address --- {{$route.params.address}} </h3>
                <h3>time --- {{$route.params.time}} </h3>
                <p>$route.query(查询参数)</p>
                <h3>who --- {{$route.query.who}}</h3>
                <h2>路由路径path:{{$route.path}}</h2>
                <h2>路由完整路径fullpath:{{$route.fullpath}}</h2>
                <h2>路由名称name:{{$route.name}}</h2>
                <h2>路由hash值:{{$route.hash}}</h2>
                <h2>路由标记的信息meta:{{$route.meta.isAlive?'需要缓存':'不需要缓存'}}</h2>
            </div>
        </div>
    </template>
    <template id="user">
        <div>
            <h2>User - USEr - UseR</h2>
            <h2>:路由参数(query)</h2>
            <h2>uid --- {{$route.query.uid}}</h2>
            <h2>name --- {{$route.query.name}}</h2>
        </div>
    </template>
    <template id="mine">
        <div>
            <h2>Mine - MIne - MINe</h2>
            <h2>:路由参数(params)</h2>
            <h2>mid --- {{$route.params.mid}}</h2>
        </div>
    </template>
    <template id="notfound">
        <div>
            <h2>NotFOUND - NOTfound - 404</h2>
        </div>
    </template>

  
    <script>

        // 1.定义路由组件
       const Home = {
           template:"#home"
       }
       const News = {
           template:"#news"
       }
       const Find = {
           template:"#find"
       }
       const User = {
           template:"#user"
       }
       const Mine = {
           template:"#mine"

       }
       const NotFound = {
           template:"#notfound"
       }

        // 2.定义一些路由
        //每个路由都需要映射一个组件
       const routes = [
           {path:"/",redirect:{
                name:"home"
           }},
           {path:'/home',alias:"/dashboard",component:Home,name:"home",meta:{
               isAlive:true
           }},
           {path:'/news/:nid/infos/:title?',component:News,name:"news"},

           {path:'/find/:address/:time',component:Find,name:"find",meta:{
               isAlive:true,isAnimate:true
           }},
           {path:'/user',component:User,name:"user"},
           {path:"/mine/admin",component:{
            template:"<h2>admin - admin - 超管</h2>"
           }},
           {path:'/mine/:mid',component:Mine,name:"mine"},
           {path:'/404',component:NotFound,name:'notfound'},
           {path:"*",redirect:{
               name:"notfound"
           }}

       ]
        // 3. 创建路由实例并传递 `routes` 配置 你可以在这里输入更多的配置
        //# 表示 hash 路由
        const router = new VueRouter({
            routes,
            mode:'hash'
        })

        // 4.路由挂载到根实例
        const vm = new Vue ({
            router, //
            data:{
                title:"Vue 路由初步"
            },
            watch:{
                '$route':function(to,from){
                    console.log(to);
                    console.log(from);
                }
            },
            mounted(){
                document.getElementsByTagName('title')[0].innerHTML = this.title
                console.log(this.$router);
                 // 路由对象  负责路由跳转 路由导航和路由全局监听
                console.log(this.$route);
                // 路由信息对象  当前激活的路由对象  路由参数 query(?)&params(:)  
            }
        }).$mount('#app')
    </script>
</body>
</html>